<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../CSS/index1.css">
    <link rel="stylesheet" href="../CSS/reset1.css">
    <link rel="stylesheet" href="../CSS/icon图标0/iconfont.css">
    <link rel="shortcut icon" href="../../../../../favicon.ico" />
    <style type="text/css"></style>
    <title>云淄主页</title>
</head>
<body style="overflow: hidden;">
    <script src="../JS/index.js"></script>
    <!-- 左侧导航栏 -->
    <div id="tocenter"> 
        <div id="blue-line">
            <div id="title">
               <div id="main-logo" > <img src="../image/logo.png" alt=""></div>
                <span id="main-word">云淄</span>
            </div>
        <a href="../../../../主页.html">  <ul id="min-box">
          <span id="left-img">&#xe691;</span>
            <span id="min-word">主页</span>
        </ul></a>
          <ul id="min-box-1" onclick="beopen4()">
            <span id="left-img">&#xe641;</span>
              <span id="min-word">管理</span>
              <span id="be-more-4">&#xe637;</span>
          </ul>
              <ul id="two-box-4">
                <a href="../../../档案编辑/管理-档案编辑-主页/HTML/主页.html"><li id="two-word">档案编辑</li></a>
               <a href="../../../管理审批/管理-审批-主页/HTML/主页.html"> <li id="two-word">管理审批</li></a>
                <a href="../../../黑名单/管理-黑名单-主页/HTML/主页.html"><li id="two-word">黑名单</li></a>
          </ul>
          <ul id="min-box-2" onclick="beopen1()">
            <span id="left-img">&#xe7a4;</span>
              <span id="min-word">物品档案</span>
              <span id="be-more-0">&#xe637;</span>
          </ul>
                <ul id="two-box-0">
                  <a href="../../../物品档案/物品档案/物品档案.html"><li id="two-word">目录</li></a>
               <a href="../../../物品档案/书籍简介/书籍简介.html"> <li id="two-word">查询</li></a>
       </ul>
          <ul id="min-box-3" onclick="beopen()" onfocus="tolook()">
            <span id="left-img">&#xe6f9;</span>
              <span id="min-word">物品交流</span>
              <span id="be-more-1">&#xe637;</span>
          </ul>
                <ul id="two-box-1">
                     <a href="../../../物品交流/物品交流-预约/HTML/预约.html"><li id="two-word">预约</li></a>
                     <a href="../../../物品交流/物品交流-借阅/HTML/借阅.html"><li id="two-word">借用</li></a>
                    <a href="../../../物品交流/物品交流-归还/HTML/归还.html"> <li id="two-word">归还</li></a>
                </ul>
                 <!-- 修改部分(将id:be-more改成了be-more-3;min-box的盒子后加了onclick="beopen3()"，也可以直接把这部分粘贴过去替代原有内容) -->
            <ul id="min-box-4" onclick="beopen3()">
              <span id="left-img">&#xe613;</span>
                     <span id="min-word">统计分析</span>
                     <span id="be-more-3">&#xe637;</span>
             </ul>
                <!-- 修改部分 -->
             <!-- 添加部分 -->
                 <ul id="two-box-3">
                 <a href=""><li id="two-word">统计分析</li></a>
                 <a href="../../统计报表/统计报表.html"><li id="two-word">统计报表</li></a>
                 </ul>
              <!-- 添加部分 -->
             <ul id="min-box-5" onclick="beopen0()">
              <span id="left-img">&#xe690;</span>
                     <span id="min-word">资产维修</span>
                     <span id="be-more-2">&#xe637;</span>
             </ul> 
                 <ul id="two-box-2">
                     <a href="../../../资产维修/维修申请/维修申请.html"><li id="two-word">维修申请</li></a>
                     <a href="../../../资产维修/报修处理/报修处理.html"><li id="two-word">报修处理</li></a>
                 </ul>
                    <a href="../../../帮助/帮助.html">    <ul id="min-box-6">
                      <span id="left-img">&#xea02;</span>
                              <span id="min-word">帮助</span>
                     </ul></a>
             <a href="javascript:history.back(-1)"><img id="toback" src="../image/Log out.png" alt=""> </a>  
        </div>

            <!-- 上方导航栏 -->
            <div id="white-line">
                   <!-- 左侧各项 -->
              <span id="menu">&#xe505;</span>
              <div id="record"><span style="position: relative; top:35%">统计分析</span></div>
               <!--搜索框 -->
               <div id="search">
                 <span>搜索 &nbsp;</span>
                 <input id="search-box" type="text" value="例如：书名" onclick="back()" onblur="back0()"> 
                  <button id="button-box" > <span id="search-button">&#xe825;</span></button>
               </div>
               <!-- 右边各项 -->
                <div id="head-img"> <span style="position: relative; top:4px;">头像</span></div>
                <a style="text-decoration: none;" href="./其他页面/通知/HTML/通知.html"><span id="alarm">&#xe605;</span></a>
                <span id="set" onclick="beopen2()">&#xe51b;</span>
                  <div id="set-up">
                    <a href="../HTML/其他页面/重置密码/HTML/重置密码.html" style="text-decoration: none;"><ul id="min-cell" style="font-size:14px;border-radius:8px 8px 0 0;">重置密码</ul></a>
                    <a href="../HTML/其他页面/注销/HTML/注销.html" style="text-decoration: none;"><ul id="min-cell" >注销</ul></a>
                    <ul id="min-cell" style=" border-radius: 0 0 8px 8px;">更多</ul>
                  </div>
               

            </div>
            <!-- 中间白块或图标 -->
                  
              <div class="wrapper">
                <div class="view_box">
                    <div class="content">
                        <table Border="0px"Cellspacing="0"cellpadding="5" style="box-shadow: 10px 10px 10px silver;">
                            <thead >
                                <tr Bgcolor="#3242A0" Align="left"  rules="none" Height="40px"colsspan="3" Color="#fff">
                                    <th Width="600px">project</th> 
                                    <th Width="400px">number</th> 
                                    <th Width="400px">frequency</th> 
                                </tr>
                            </thead>
                            <tbody >
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list" >
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list">
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list">
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list">
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list">
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                                <tr Align="left"  rules="none" Height="40px"Bgcolor="#fff" color="#000"v-for="(item,index) in list">
                                    <td v-html="">《政治学概论》</td>
                                    <td>100006</td>
                                    <td>9</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="bar_box">
                    <div class="bar"></div>
                </div>
            </div>
        </div>        
            <script>
                
                var wrapper = document.getElementsByClassName('wrapper')[0];
                //获取展示内容区的区域
                var view_box = document.getElementsByClassName('view_box')[0];
                //获取展示内容区的区域的大小
                var view_box_height = view_box.offsetHeight;
                //获取内容区
                var content = document.getElementsByClassName('content')[0];
                //获取内容区的实际高度
                var content_height = content.offsetHeight;
                //获取滑道
                var bar_box = document.getElementsByClassName('bar_box')[0];
                //获取滑道的高度
                var bar_box_height = bar_box.offsetHeight;
                //获取滚动条
                var bar = document.getElementsByClassName('bar')[0];
                
                //求 滚动条的高度
            
                //当展示的内容区的大小刚好展示内容区域时，滚动条的高度就是滑道的高度
                if(view_box_height / content_height < 1) {
                    bar.style.height = (view_box_height / content_height) * bar_box_height + 'px';
                } else {
                    bar.style.height = bar_box_height + 'px';
                }
            
                //绑定事件(做兼容处理)
                wrapper.onmousewheel = function (e){
                //    e.wheelDelta < 0 //(-120)  向下
                //    e.wheelDelta > 0 //(120)  向上
                scrollRoll(e);
                }
                //兼容  Firefox 
                wrapper.addEventListener('DOMMouseScroll',function (e) {
                    // e.detail > 0  //(3)  滑轮向下滚动
                    // e.detail < 0  //(-3)  滑轮向上滚动
                    scrollRoll(e);
                },false)
            
            
                function scrollRoll (e) {
                    e = e || window.event;
                    if (e.detail > 0) {
                        down();
                    } else if (e.detail < 0) {
                        up();
                    }
            
                    if (e.wheelDelta > 0) {
                        up();
                    } else if (e.wheelDelta < 0) {
                        down();
                    }
                }
                //滑轮向下滚动
                function down () {
                    var speed = 8;
                    if (bar.offsetTop >= bar_box_height - bar.offsetHeight) {
                        bar.style.top = bar_box_height - bar.offsetHeight + 'px';
                        //注意：内容区应该向上移动
                        content.style.top = - (content_height - view_box_height) + 'px';
                    } else {
                        bar.style.top = bar.offsetTop + speed + 'px';
                        content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
                    }
                }
                //滑轮向上滚动
                function up () {
                    var speed = 8;
                    if (bar.offsetTop <= 0) {
                        bar.style.top = 0 + 'px';
                        content.style.top = 0 + 'px';
                    } else {
                        bar.style.top = bar.offsetTop - speed + 'px';
                        content.style.top = - bar.offsetTop / (bar_box_height - bar.offsetHeight) * (content_height - view_box_height) + 'px';
                    }
                }
            </script>

</body>
</html>